import React from 'react'
import "./index.css"
export default function Footer({ todoList, setTodoList }) {
  //计算已完成的个数
  const getCheckedNum = () => {
    return todoList.reduce((p, c) => c.done ? p + 1 : p, 0);
  }
  //全部选中的多选框选择事件函数
  const checedAllHandle =(e)=>{
    const expChecked = e.target.checked;
    const newTodoList = todoList.map((item)=>{
      return {...item,done:expChecked}
    })
    setTodoList(newTodoList)
  }
    //清除所有已完成事件回调函数
    const deleteAllHandle = () => {
      const newTodoList = todoList.filter(item => !item.done);
      setTodoList(newTodoList);
    }
  
  return (
    <div className="todo-footer">
      <label>
        <input type="checkbox"  onChange={checedAllHandle} checked={getCheckedNum() === todoList.length && todoList.length !== 0}/>
      </label>
      <span>
        <span>已完成{getCheckedNum()}</span> / 全部 {todoList.length}
      </span>
      <button className="btn btn-danger" onClick={deleteAllHandle}>清除已完成任务</button>
    </div>
  )
}
